<template>
  <v-card flat min-height="361" class="px-7 py-4">
    <v-form ref="form">
      <v-row no-gutters>
        <v-col cols="3">
          <p class="mb-0 label">Item #</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.itemNumber"
            v-validate="'required'"
            name="Item #"
            class="gray-input elevation-2"
            disabled
            dense
            hide-details
            solo
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Item #") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">Item Description</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.itemDescription"
            v-validate="'required'"
            name="Item Description"
            class="gray-input elevation-2"
            disabled
            dense
            hide-details
            solo
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Item Description") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">Serial Number</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.serialNumber"
            v-validate="'required'"
            name="Serial Number"
            class="white-input"
            solo
            dense
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Serial Number") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">Alias</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.alias"
            v-validate="'required'"
            name="Alias"
            class="white-input"
            solo
            dense
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Alias") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">Location code</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.locationCode"
            v-validate="'required'"
            name="Location code"
            class="gray-input elevation-2"
            disabled
            dense
            hide-details
            solo
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Location code") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">QTY</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.QTY"
            v-validate="'required'"
            name="QTY"
            class="gray-input elevation-2"
            disabled
            dense
            hide-details
            solo
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("QTY") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="pt-4">
        <v-col cols="3">
          <p class="mb-0 label">Cost</p>
        </v-col>
        <v-col class="text-left" cols="5">
          <v-text-field
            v-model="formData.cost"
            v-validate="'required|usd'"
            name="Cost"
            class="white-input"
            dense
            hide-details
            solo
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Cost") }}
          </span>
        </v-col>
      </v-row>
    </v-form>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { IItems } from "@/components/Customer/index";
@Component({
  components: {},
})
export default class EditItem extends Vue {
  formData = {
    id: "",
    itemNumber: "",
    cateCode: "",
    itemDescription: "",
    serialNumber: "",
    alias: "",
    locationCode: "",
    QTY: "",
    cost: "",
    dateExpire: "",
  };

  resetForm() {
    this.formData.id = "";
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData(): IItems {
    return JSON.parse(JSON.stringify(this.formData));
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/EditItem/EditItem.scss";
</style>
